<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-bars" onclick="ToggleMenu();"></a>

			<h1 class="mui-title">主页</h1>
			<a class="mui-icon mui-icon-info mui-pull-right" onclick="openInfo();"></a>
		</header>

		<div class="mui-content">
			<ul id="list" class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/accordion.html">
						accordion（折叠面板）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						actionsheet（操作表）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/actionsheet.html">
								H5模式
							</a>
						</li>
						<li class="mui-table-view-cell mui-plus-visible">
							<a class="mui-navigate-right" href="examples/actionsheet-plus.html">
								native模式
							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell mui-plus-visible">
					<a class="mui-navigate-right" href="examples/ajax.html">
						ajax（网络请求）
					</a>
				</li>

				
				

				
				<li class="mui-table-view-cell mui-plus-visible">
					<a class="mui-navigate-right" data-title-type="native" href="examples/im-chat.html">
						chat（聊天窗口）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/stark.html">
						股票信息查询
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/zidongkaoqin.html">
						自动考勤
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/findPerson.html">
						人员信息
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/grid-pagination1.html">
						九宫格
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/signature.html">
						签名
					</a>
				</li>

			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				statusBarBackground: '#f7f7f7'
			});
			var aniShow = "pop-in";
			var menu = null;
			var _self;
			//只有ios支持的功能需要在Android平台隐藏；
			if(mui.os.android) {
				var list = document.querySelectorAll('.ios-only');
				if(list) {
					for(var i = 0; i < list.length; i++) {
						list[i].style.display = 'none';
					}
				}
				//Android平台暂时使用slide-in-right动画
				if(parseFloat(mui.os.version) < 4.4) {
					aniShow = "slide-in-right";
				}
			}
			//初始化，并预加载webview模式的选项卡			
			function preload() {

				var menu_style = {
					left: "-70%",
					width: '70%',
					popGesture: "none",
					render: "always"
				};

				if(mui.os.ios) {
					menu_style.zindex = -1;
				}

				//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
				menu = mui.openWindow({
					id: 'index-menu',
					url: 'index-menu.html',
					styles: menu_style,
					show: {
						aniShow: 'none'
					},
					waiting: {
						autoShow: false
					}
				});
			}
			mui.plusReady(function() {
				//预加载index-menu.html
				preload();
				//绘制顶部图标
				_self = plus.webview.currentWebview();

				//开启回弹
				_self.setStyle({
					bounce: "vertical",
					bounceBackground: "#efeff4"
				});

				var about_left = window.innerWidth - 34;

				//启用侧滑拖拽操作，延时的原因是menu页是延时创建的，所以这里需要相应延时
				setTimeout(function() {
					_self.drag({
						direction: "right",
						moveMode: "followFinger"
					}, {
						view: menu,
						moveMode: "follow"
					}, function(e) {
						//console.log(JSON.stringify(e));
					});
				}, 350);

			});
			//主列表点击事件
			mui('#list').on('tap', 'a', function() {

				var id = this.getAttribute('href');

				var href = this.getAttribute('href');

				var webview_style = {
					popGesture: "close"
				}
				var extras = {};
				if(href && ~href.indexOf('.html')) {
					//非plus环境，直接走href跳转
					if(!mui.os.plus) {
						location.href = href;
						return;
					}
					

					var webview = plus.webview.create(href, id, webview_style, extras);
					webview.addEventListener("titleUpdate", function() {
						setTimeout(function() {
							webview.show(aniShow, 300);
						}, 100);
					});
				}
			});
			/*
			 * 
			 *此函数用来打开或者关闭
			 * 侧滑菜单
			 */

			function ToggleMenu() {
				if(parseInt(_self.getStyle().left) > 0) {
					closeMenu();
				} else {
					openMenu();
				}
			}
			/*
			 
			 * openInfo()
			 * 打开info.html
			 * */
			function openInfo() {
				var aniShow = mui.os.plus ? "slide-in-right" : "zoom-fade-out";
				mui.openWindow({
					url: "examples/info.html",
					id: "info",
					styles: {
						popGesture: "close"
					},
					show: {
						aniShow: aniShow,
						duration: 300
					}
				});
			}
			/**
			 * 显示侧滑菜单
			 */
			function openMenu() {
				plus.webview.startAnimation({
						'view': _self,
						'styles': {
							'fromLeft': '0',
							'toLeft': "70%"
						},
						'action': 'show'
					}, {
						'view': menu,
						'styles': {
							'fromLeft': "-70%",
							'toLeft': '0'
						},
						'action': 'show'
					},
					function(e) {
						//console.log(JSON.stringify(e));
						if(e.id == menu.id) { //侧滑菜单打开
						}
					}.bind(this)
				)
			};
			/**
			 * 关闭菜单
			 */
			function closeMenu() {
				plus.webview.startAnimation({
						'view': _self,
						'styles': {
							'fromLeft': '70%',
							'toLeft': "0"
						},
						'action': 'show'
					}, {
						'view': menu,
						'styles': {
							'fromLeft': "0",
							'toLeft': '-70%'
						},
						'action': 'show'
					},
					function(e) {
						console.log(JSON.stringify(e));
						if(e.id == _self.id) {}
					}.bind(this)
				)
			};
			window.addEventListener("menu:close", closeMenu);

			var backButtonPress = 0;
			mui.back = function() {
				if(parseInt(_self.getStyle().left) > 0) {
					closeMenu();
					return;
				}

				backButtonPress++;
				if(backButtonPress > 1) {
					plus.runtime.quit();
				} else {
					plus.nativeUI.toast('再按一次退出应用');
				}
				setTimeout(function() {
					backButtonPress = 0;
				}, 1000);
				return false;
			}

			//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
			mui.menu = function() {
				if(parseInt(_self.getStyle().left) > 0) {
					closeMenu();
				} else {
					openMenu();
				}
			}
		</script>
	</body>

</html>